<template>
  <div class="weather-environmental-comp">
    <div class="echarts-container">
      <div class="bubble temperature">
        <span class="value">{{ climate.temperature }}℃</span>
        <span class="name">气温</span>
      </div>
      <div class="bubble wind-speed">
        <span class="value">{{ climate.windSpeed }}m/s</span>
        <span class="name">风速</span>
      </div>
      <div class="bubble humidity">
        <span class="value">{{ climate.humidity }}%</span>
        <span class="name">湿度</span>
      </div>
      <div class="bubble wind-direction">
        <span class="value">{{ setWindDirection(climate.windDirection) }}</span>
        <span class="name">风向</span>
      </div>
      <div class="main">
        <Histogram :options="options"></Histogram>
      </div>
    </div>
    <div class="indicator-bar">
      <ul>
        <template v-for="(value, index) in indicatorList">
          <li
            v-if="index < indicatorList.length - 1"
            :key="index">
            <span class="before">{{ value }}</span>
            <span class="text">{{ indicatorText[index] }}</span>
            <span class="after" v-if="index === indicatorList.length - 2">
              {{ indicatorList[indicatorList.length - 1] }}
            </span>
          </li>
        </template>
      </ul>
    </div>
  </div>
</template>

<script>
import Histogram from '@/components/echarts/base';

export default {
  props: {
    climate: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      indicatorList: [0, 50, 75, 150, 250, 300, 500],
      indicatorText: ['优', '良', '轻度污染','中度污染','重度污染','严重污染']
    };
  },
  computed: {
    level() {
      const { dust = 0 } = this.climate;
      const len = this.indicatorList.length;
      if (dust > this.indicatorList[len - 1]) {
        return len - 1;
      }
      const index = this.indicatorList.findIndex(v => {
        return dust <= v;
      });
      return index <= 0 ? 0 : index - 1;
    },
    colorOptions() {
      const options = {
        '0': ['#4cd46a', '#61de82'],
        '1': ['#dabe08', '#eedf12'],
        '2': ['#e37539', '#f3ad6a'],
        '3': ['#e31b15', '#f2392e'],
        '4': ['#c7309c', '#e35ac8'],
        '5': ['#683920', '#9e6941'],
      };
      return options[this.level || '0'];
    },
    options() {
      const { dust = 0 } = this.climate;
      return {
        series: [
          {
            type: 'gauge',
            radius: '90%',
            pointer: {
              show: false
            },
            detail: {
              formatter: function(value) {
                return `{val|${value}}\n{name|PM2.5}`;
              },
              rich: {
                val: {
                  fontSize: this.$setRem(30, false),
                  fontFamily: 'DINBold',	// 中间数字
                  color: '#fff',
                  fontWeight: '700',
                },
                name: { // 框内名字
                  width: this.$setRem(110, false),
                  fontSize: this.$setRem(14, false),
                  color: '#bac4ff',
                  fontWeight: '470',
                  textAlign: 'center',
                  lineHeight: this.$setRem(20, false)
                },
                type: {
                  width: this.$setRem(110, false),
                  fontSize: this.$setRem(14, false),
                  color: 'green',
                  textAlign: 'center',
                  lineHeight: this.$setRem(20, false)
                }
              },
              offsetCenter: ['0%', '-8%'],
            },
            data: [dust],
            axisLine: { // 仪表盘轴线相关配置
              show: true,
              lineStyle: {
                color: [
                  [
                    dust / this.indicatorList[this.indicatorList.length - 1],
                    new this.$echarts.graphic.LinearGradient(
                      0, 1, 0, 0,
                      [{
                        offset: 0,
                        color: this.colorOptions[0]
                      }, {
                        offset: 0.8,
                        color: this.colorOptions[1]
                      }]
                    )
                  ],
                  [1, '#3d3d75']
                ],
                width: this.$setRem(10, false)
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              color: '#fff',
              backgroundColor: this.colorOptions[0],
              show: true,
              lineHeight: this.$setRem(24, false),
              padding: [0, this.$setRem(18, false)],
              fontSize: this.$setRem(14, false),
              distance: this.$setRem(110, false),
              borderRadius: this.$setRem(20, false),
              formatter: (value) => {
                if (value === 50) {
                  return this.indicatorText[this.level];
                }
              }
            },
            // label: {
            //   normal: {
            //     show: true,
            //     position: 'outter',
            //     formatter:function (parms) {
            //       return parms.data.name;
            //     }
            //   }
            // },
          }
        ]
      };
    }
  },
  components: {
    Histogram
  },
  methods: {
    // 设置风向
    setWindDirection(v) {
      if (!v) return '';
      if (/[\u4e00-\u9fa5]/g.test(v)) return v;
      if (v > 0 && v <= 22.5) return '北风';
      if (v > 22.5 && v <= 67.5) return '东北风';
      if (v > 67.5 && v <= 112.5) return '东风';
      if (v > 112.5 && v <= 157.5) return '东南风';
      if (v > 157.5 && v <= 202.5) return '南风';
      if (v > 202.5 && v <= 247.5) return '西南风';
      if (v > 247.5 && v <= 292.5) return '西风';
      if (v > 292.5 && v <= 337.5) return '西北风';
      return '北风';
    },
  }
};
</script>

<style scoped lang="scss">
  @import "../../../assets/styles/main";

  .weather-environmental-comp {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    .echarts-container {
      width: 100%;
      height: calc(100% - 40px);
      flex: 1;
      display: flex;
      align-items: center;
      position: relative;
      .bubble {
        position: absolute;
        width: 65px;
        height: 65px;
        /*background: #3c3c79;*/
        /*border: 10px solid rgba(186, 196, 255, .1);*/
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: 0 0 0 0.1em rgba(255, 255, 255, .2) inset, 0 0 1em #55559d inset;
        color: #fff;
        transition:
          transform 0.3s linear,
          box-shadow 0.2s linear;
        z-index: 1;
        cursor: pointer;
        &:hover {
          transform: scale(1.1);
          box-shadow: 0 0 0 0.1em rgba(255, 255, 255, .2) inset, 0 0 1em $mainColor inset;
        }
        &::after {
          background-color: #fff;
          border-radius: 50%;
          content: '';
          display: block;
          opacity: 0.7;
          position: absolute;
          top: 0.75em;
          left: 0.75em;
          width: 0.8em;
          height: 0.3em;
          transform: rotate(-45deg);
        }
        &.temperature {
          top: 30px;
          left: 100px;
        }
        &.wind-speed {
          width: 75px;
          height: 75px;
          top: 20px;
          right: 120px;
        }
        &.humidity {
          top: 100px;
          left: 50px;
        }
        &.wind-direction {
          top: 115px;
          right: 60px;
        }
        .value {
          font-size: 12px;
          font-weight: bold;
          padding-top: 10px;
        }
        .name {
          font-size: 12px;
          transform: scale(.85);
        }
      }
      .main {
        width: 100%;
        height: 100%;
      }
    }
    .indicator-bar {
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      padding-bottom: 10px;
      ul {
        height: 24px;
        width: 480px;
        display: flex;
        justify-content: center;
        align-items: center;
        li {
          width: 80px;
          height: 100%;
          position: relative;
          font-size: 12px;
          display: flex;
          justify-content: center;
          align-items: center;
          .before {
            position: absolute;
            top: -20px;
            left: 0;
          }
          .after {
            position: absolute;
            top: -20px;
            right: -20px;
          }
        }
        li:nth-child(1) {
          background: linear-gradient(to right, #4cd46a, #61de82);
          border-radius: 20px 0 0 20px;
        }
        li:nth-child(2) {
          background: linear-gradient(to right, #dabe08, #eedf12);
        }
        li:nth-child(3) {
          background: linear-gradient(to right, #e37539, #f3ad6a);
        }
        li:nth-child(4) {
          background: linear-gradient(to right, #e31b15, #f2392e);
        }
        li:nth-child(5) {
          background: linear-gradient(to right, #c7309c, #e35ac8);
        }
        li:nth-child(6) {
          background: linear-gradient(to right, #683920, #9e6941);
          border-radius: 0 20px 20px 0;
        }
      }
    }
  }
</style>
